<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0"
    />
    <!-- <meta name="referrer" content="never" /> -->
    <title>Comic-Reader</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      img {
        width: 100%;
        height: initial;
        margin-bottom: 20px;
        vertical-align: top;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.64);
      }
    </style>
    <script>
      var _hmt = _hmt || []
      ;(function () {
        var hm = document.createElement('script')
        hm.src = 'https://hm.baidu.com/hm.js?808e2b3d19b283a29d4f56206f30363d'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
  </head>
  <body>
    <div class="container"></div>
    <script>
      try {
        function getQuery(name) {
          const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
          const r = window.location.search.substr(1).match(reg)
          if (r != null) {
            return decodeURIComponent(r[2])
          }
          return null
        }

        // script 执行的脚本必须提供String: title, Array<String>: images变量
        eval(getQuery('script'))
        document.title = title

        let _html = ''

        images.forEach((item, index) => {
          _html += `<img class="lazy lazy-${index}" data-src="${item}" referrerpolicy="no-referrer" width="375" height="667" />`
        })
        document.querySelector('.container').innerHTML = _html

        // 先完全加载完第1,2张图片再初始化其余的lazyload
        document.querySelector('.lazy-0').onload = () => {
          lazyload(document.querySelectorAll('.lazy-1'))
        }
        document.querySelector('.lazy-1').onload = () => {
          new LazyLoad(document.querySelectorAll('.lazy'), {
            root: null,
            rootMargin: '480px',
            threshold: 0
          })
        }
        lazyload(document.querySelectorAll('.lazy-0'))
      } catch (error) {
        console.log('解析错误')
      }
    </script>
  </body>
</html>
